<template>
	<view class="root" @click="goReply">
		<view class="avatar">
			<image :src="item.user.avatar ? item.user.avatar : '../../static/image/user-default.png' "
				mode="aspectFill">
			</image>
		</view>
		<view class="wrap">
			<view class="nickname">{{item.user.nickname}}
				<!-- .stop阻止冒泡 -->
				<view v-if="item.author && displayDelete" class="icon t-icon t-icon-shanchu_"
					@click.stop="deleteComment(item.id)">
				</view>
			</view>
			<view class="content">
				{{item.content}}
			</view>
			<view class="info">
				<!-- <view class="btn">3回复</view> -->
				<u-button v-if="replyCommentNum>0" class="btn" :plain="true" shape="square" type="success" size="mini">
					<text>{{replyCommentNum}}条回复</text>
				</u-button>
				<view class="time">
					<uni-dateformat :date="item.time" format="yyyy年MM月dd日" :threshold="[60000,3600000*24*30]">
					</uni-dateformat>
				</view>
				<view class="provice">
					{{item.province}}
				</view>
				<u-toast ref="uToast"></u-toast>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		GetStroage
	} from "../../utils/tool.js"
	export default {
		name: "commentList",
		props: {
			item: {
				type: Object,
				default () {
					return {}
				}
			},
			replyCommentNum: {
				typeNum: Number,
				default () {
					return 0
				}
			},
			displayDelete: {
				type: Boolean,
				default () {
					return true
				}
			},
			typeNum: {
				type: Number,
				default () {
					return 0
				}
			},
			topTypeNum: { //默认1表示可以点击去reply
				type: Number,
				default () {
					return 1
				}
			}
		},
		data() {
			return {
				msgList: {
					type: "success",
					message: "获取验证码成功"
				},
				isAuthor: false,
			};
		},
		onShow() {
			console.log("评论组件--------", this.item);
			let userInfo = GetStroage("userInfo");
			if (this.item.uid == userInfo.id) {
				this.isAuthor = true;
			}
		},
		methods: {
			goReply() { //跳转回复页面【这里一定要加限制条件】
				if (this.typeNum == 0 && this.topTypeNum != 0) {
					uni.setStorageSync("reply", this.item); //同步设置缓存【同步更安全】
					uni.navigateTo({
						url: "/pages_community/reply/reply"
					})
				}
			},
			fillMsg(type, msg) { //提示消息的赋值
				this.msgList.type = type;
				this.msgList.message = msg;
				this.$refs.uToast.show({
					...this.msgList
				})
			},
			deleteComment(index) {
				console.log("要删除的评论:", index);
				console.log("------", this.item, this.typeNum);
				uni.showModal({
					title: "警告",
					content: "确定要删除评论吗?",
					success: (ans) => {
						if (ans.confirm) {
							uni.request({
								url: this.$e.Url + "/user/deleteComment",
								data: {
									id: index
								},
								header: {
									"Content-Type": "application/json"
								},
								method: "DELETE",
								success: (res) => {
									console.log("请求API接口【/user/deleteComment】", res);
									this.fillMsg("success", "删除成功");
									this.$emit("deleteComment", res.data.id);
									if (this.typeNum == 1) { //表明是二级评论的删除
										this.updatePostComment(this.item.postid, -1);
									} else if (this.typeNum == 0) { //表明是一级评论的删除
										this.updatePostComment(this.item.postid, -this
											.replyCommentNum - 1);
									}
								}
							})
						}
					}
				})
			},
			updatePostComment(id, num) { //改变帖子评论数
				uni.request({
					url: this.$e.Url + "/user/updatePostComment",
					data: {
						id: id,
						num: num
					},
					header: {
						"Content-Type": "application/json"
					},
					method: "PUT",
					success: (res) => {
						console.log("请求API接口【/user/updatePostComment】", res);
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	.root {
		display: flex; //左右布局

		.avatar {
			width: 60rpx;
			height: 60rpx;

			image {
				width: 100%;
				height: 100%;
				border-radius: 50rpx;
			}
		}

		.wrap {
			padding: 0 30rpx;

			.nickname {
				display: flex;
				align-items: center;
				justify-content: space-between;
				width: 500rpx;
				font-size: 26rpx;
				color: #666;
				padding: 10rpx 0;
			}

			.content {
				font-size: 34rpx;
				color: #111;
				line-height: 1.8em;
			}

			.info {
				font-size: 26rpx;
				color: #666;
				display: flex;
				align-items: center;
				padding: 10rpx 0rpx;

				.btn {
					margin: 0 10rpx 0 0;
					padding: 6rpx 10rpx;
					// background: #c9daff;
					width: 110rpx;
					border-radius: 10rpx;
				}

				.time {
					margin-right: 25rpx;
				}

				.provice {}
			}
		}
	}
</style>
